import React, { memo } from "react"
import PropTypes from "prop-types"
import { Checkbox } from "@mui/material"
import { useDispatch } from "react-redux"
import { updTodoItem } from "../../store/modules/todo"
import { setActive, switchFlag } from "../../store/modules/drawer"

TodoItem.propTypes = {
  todoItem: PropTypes.object,
  activeDate: PropTypes.object,
}
function TodoItem(props) {
  const { content, done, index } = props.todoItem

  const dispatch = useDispatch()
  const changeItemDone = (e) => {
    dispatch(
      updTodoItem({
        index,
        item: { ...props.todoItem, done: e.target.checked },
        date: props.activeDate,
      })
    )
  }

  const showTodoDetail = () => {
    dispatch(setActive(index))
    dispatch(switchFlag(true))
  }
  return (
    <div
      className="p-3 flex hover:bg-gray-50 bg-white transition-all border-b-2 border-solid border-gray-50"
      onClick={showTodoDetail}
    >
      <Checkbox checked={done} onChange={changeItemDone}></Checkbox>
      <div className={`p-2 ${done ? "line-through text-gray-300" : ""}`}>
        {content}
      </div>
    </div>
  )
}
export default memo(TodoItem)
